<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/blogs/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/blogs/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/blogs/css/main.css?v=5.1.3" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/blogs/images/apple-touch-icon.png?v=5.1.3">


  <link rel="icon" type="image/png" sizes="32x32" href="/blogs/images/favicon-32x32.png?v=5.1.3">


  <link rel="icon" type="image/png" sizes="16x16" href="/blogs/images/favicon-16x16.png?v=5.1.3">


  <link rel="mask-icon" href="/blogs/images/logo.svg?v=5.1.3" color="#222">





  <meta name="keywords" content="Vue," />










<meta name="description" content="1.双向数据绑定-前置技术点 需要实现的vue双向数据绑定，需要使用到一下三种技术 数组的reduce()方法 进行数值的累加计算 链式获取对象的属性值   发布-订阅者模式 Dep类：负责进行依赖收集 Watcher类：负责订阅一些事件   使用Object.defineProperty()进行数据劫持 通过get()劫持取值操作 通过set()劫持赋值操作      1.数组的reduce()">
<meta property="og:type" content="article">
<meta property="og:title" content="vue双向数据绑定原理解析(源代码在文章末尾)">
<meta property="og:url" content="https://louchaoyy.gitee.io/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/index.html">
<meta property="og:site_name" content="Chao&#39;s blog">
<meta property="og:description" content="1.双向数据绑定-前置技术点 需要实现的vue双向数据绑定，需要使用到一下三种技术 数组的reduce()方法 进行数值的累加计算 链式获取对象的属性值   发布-订阅者模式 Dep类：负责进行依赖收集 Watcher类：负责订阅一些事件   使用Object.defineProperty()进行数据劫持 通过get()劫持取值操作 通过set()劫持赋值操作      1.数组的reduce()">
<meta property="og:locale">
<meta property="og:image" content="https://louchaoyy.gitee.io/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/set_target.png">
<meta property="og:image" content="https://louchaoyy.gitee.io/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/get.png">
<meta property="og:image" content="https://louchaoyy.gitee.io/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/property.png">
<meta property="og:image" content="https://louchaoyy.gitee.io/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/property_proxy.png">
<meta property="og:image" content="https://louchaoyy.gitee.io/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/fragment.png">
<meta property="og:image" content="https://louchaoyy.gitee.io/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/regPlace.png">
<meta property="og:image" content="https://louchaoyy.gitee.io/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/p1.png">
<meta property="og:image" content="https://louchaoyy.gitee.io/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/p2.png">
<meta property="og:image" content="https://louchaoyy.gitee.io/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/p3.png">
<meta property="og:image" content="https://louchaoyy.gitee.io/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/p4.png">
<meta property="og:image" content="https://louchaoyy.gitee.io/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/p5.png">
<meta property="og:image" content="https://louchaoyy.gitee.io/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/p6.png">
<meta property="article:published_time" content="2022-03-18T12:27:24.000Z">
<meta property="article:modified_time" content="2022-03-20T12:11:45.231Z">
<meta property="article:author" content="Chaoyxy">
<meta property="article:tag" content="Vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://louchaoyy.gitee.io/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/set_target.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '',
    scheme: 'Gemini',
    version: '5.1.3',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":true,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://louchaoyy.gitee.io/blogs/2022/03/18/vue双向数据绑定原理解析/"/>





  <title>vue双向数据绑定原理解析(源代码在文章末尾) | Chao's blog</title>
  








<meta name="generator" content="Hexo 5.4.0"></head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/blogs/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Chao's blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/blogs/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-question-circle"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/blogs/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-question-circle"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/blogs/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-question-circle"></i> <br />
            
            标签
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://louchaoyy.gitee.io/blogs/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blogs/images/cat.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Chao's blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">vue双向数据绑定原理解析(源代码在文章末尾)</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-03-18T20:27:24+08:00">
                2022-03-18
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count"
                        data-disqus-identifier="2022/03/18/vue双向数据绑定原理解析/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h2 id="1-双向数据绑定-前置技术点"><a href="#1-双向数据绑定-前置技术点" class="headerlink" title="1.双向数据绑定-前置技术点"></a>1.双向数据绑定-前置技术点</h2><ul>
<li>需要实现的vue双向数据绑定，需要使用到一下三种技术<ol>
<li>数组的reduce()方法<ul>
<li>进行数值的累加计算</li>
<li>链式获取对象的属性值</li>
</ul>
</li>
<li>发布-订阅者模式<ul>
<li>Dep类：负责进行<strong>依赖收集</strong></li>
<li>Watcher类：负责<strong>订阅一些事件</strong></li>
</ul>
</li>
<li>使用Object.defineProperty()进行数据劫持<ul>
<li>通过get()劫持<strong>取值操作</strong></li>
<li>通过set()劫持<strong>赋值操作</strong></li>
</ul>
</li>
</ol>
</li>
</ul>
<h3 id="1-数组的reduce-方法"><a href="#1-数组的reduce-方法" class="headerlink" title="1.数组的reduce()方法"></a>1.数组的reduce()方法</h3><ul>
<li><p>对于如下一个数组，如果需要进行累加操作，有多种方法可以实现</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr = [3,5,6,7,21,55,34]</span><br></pre></td></tr></table></figure>

<span id="more"></span></li>
</ul>
<ol>
<li><p>方法一（传统的for/forEach循环）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">21</span>,<span class="number">55</span>,<span class="number">34</span>];</span><br><span class="line"><span class="keyword">var</span> total = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i&lt;arr.length;i++)&#123;</span><br><span class="line">    total += arr[i]</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(total)		<span class="comment">//131</span></span><br><span class="line"><span class="comment">//================================</span></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">21</span>,<span class="number">55</span>,<span class="number">34</span>];</span><br><span class="line"><span class="keyword">var</span> total = <span class="number">0</span>;</span><br><span class="line">arr.forEach(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">    total+=item</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(total)		<span class="comment">//131</span></span><br></pre></td></tr></table></figure>

<p>不出意外得到结果<strong>131</strong></p>
</li>
<li><p>方法二（reduce操作）</p>
<p>reduce()方法接受两个参数，前一个是一个函数，后面一个为初始值</p>
<p><code>reduce(fun,startValue)</code>实现方法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">3</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">21</span>,<span class="number">55</span>,<span class="number">34</span>];</span><br><span class="line"><span class="comment">//前一个参数代表最后的结果，后面一个代表每一次循环的值</span></span><br><span class="line"><span class="keyword">const</span> res = arr.reduce(<span class="function">(<span class="params">val,item</span>)=&gt;</span>&#123;<span class="keyword">return</span> val += item &#125;,<span class="number">0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(res)		<span class="comment">//131</span></span><br></pre></td></tr></table></figure></li>
</ol>
<ul>
<li><p>链式取值</p>
<p>对于一个对象obj如下</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;zhangsan&quot;</span>,</span><br><span class="line">    <span class="attr">info</span>:&#123;</span><br><span class="line">        <span class="attr">address</span>:&#123;</span><br><span class="line">            <span class="attr">location</span>:<span class="string">&quot;北京海淀&quot;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>我们想要拿到这个地址，该怎么办呢？传统方法就是<strong>对象<code>.</code>出来</strong>这样确实可行 </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(obj.info.address.location)		<span class="comment">// 北京海淀</span></span><br></pre></td></tr></table></figure>

<p>如果使用reduce方法呢？</p>
<p>首先把<code>&#39;obj.info.address.location&#39;</code>切割成数组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;zhangsan&quot;</span>,</span><br><span class="line">    <span class="attr">info</span>:&#123;</span><br><span class="line">        <span class="attr">address</span>:&#123;</span><br><span class="line">            <span class="attr">location</span>:<span class="string">&quot;北京海淀&quot;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> arrStr = <span class="string">&#x27;info.address.location&#x27;</span></span><br><span class="line"><span class="keyword">const</span> location = arrStr.split(<span class="string">&#x27;.&#x27;</span>).reduce(<span class="function">(<span class="params">newObj,k</span>)=&gt;</span>&#123;<span class="keyword">return</span> newObj[k]&#125;,obj)</span><br><span class="line"><span class="built_in">console</span>.log(location)		  	<span class="comment">// 北京海淀</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="2-发布-订阅者模式"><a href="#2-发布-订阅者模式" class="headerlink" title="2.发布-订阅者模式"></a>2.发布-订阅者模式</h3><h4 id="1-什么是发布-订阅者模式？"><a href="#1-什么是发布-订阅者模式？" class="headerlink" title="1.什么是发布-订阅者模式？"></a>1.什么是发布-订阅者模式？</h4><p>可以理解为发布者是一个超市的管理员，订阅者是一些超市的顾客，订阅者通过订阅这个超市，超市老板（发布者）会记录下所有订阅者的电话号码，每当有新品的时候，超市老板会通过电话号码一个一个通知所有的订阅者，告诉他们有新品了，这些订阅者就会根据自己的需求来超市买自己想要的东西了。比喻不一定准确，但是就是这个意思。</p>
<h4 id="2-实现以下发布-订阅者模式"><a href="#2-实现以下发布-订阅者模式" class="headerlink" title="2.实现以下发布-订阅者模式"></a>2.实现以下发布-订阅者模式</h4><ul>
<li><p>对于Dep类来说，自己是发布者，所以要具备以下东西</p>
<ul>
<li>负责进行依赖收集（功能）</li>
<li>要有个专门的数组，来保存所有的订阅信息（电话簿）</li>
<li>要提供一个想数组中追加订阅信息的方法（存电话号码）</li>
<li>提供一个循环，循环每次触发数组中的每个订阅信息（逐一打电话通知）</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//收集订阅</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dep</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.subs = []      <span class="comment">//存放所有订阅者信息</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//向subs数组中添加所有订阅者的信息</span></span><br><span class="line">    <span class="function"><span class="title">addSub</span>(<span class="params">watcher</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.subs.push(watcher)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//发布订阅的函数</span></span><br><span class="line">    <span class="function"><span class="title">notify</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="comment">//每次传进来的都是一个Watcher对象</span></span><br><span class="line">        <span class="built_in">this</span>.subs.forEach(<span class="function">(<span class="params">watcher</span>)=&gt;</span>&#123;</span><br><span class="line">            watcher.update()</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>对于Watcher类来说</p>
<ul>
<li>负责订阅一些事件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Watcher</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">cb</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.cb = cb        <span class="comment">//把这个函数挂载到自己的身上（watcher实例上）</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//触发回调的方法</span></span><br><span class="line">    <span class="function"><span class="title">update</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.cb()</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>创建订阅者实例对象</p>
<p>创建两个订阅者</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> w1 = <span class="keyword">new</span> Watcher(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;我是第1个订阅者&quot;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">const</span> w2 = <span class="keyword">new</span> Watcher(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;我是第2个订阅者&quot;</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
<li><p>创建发布者实例对象，并且把订阅者添加到相对应的数组中，最后发布消息</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> dep = <span class="keyword">new</span> Dep()</span><br><span class="line">dep.addSub(w1)</span><br><span class="line">dep.addSub(w2)</span><br><span class="line"><span class="comment">//发布消息</span></span><br><span class="line">dep.notify()</span><br></pre></td></tr></table></figure>

<p>结果如下</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">我是第1个订阅者</span><br><span class="line">我是第2个订阅者</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="3-完整实现一个最简单的发布订阅者模式"><a href="#3-完整实现一个最简单的发布订阅者模式" class="headerlink" title="3.完整实现一个最简单的发布订阅者模式"></a>3.完整实现一个最简单的发布订阅者模式</h4><ul>
<li><p>首先发布者准备好数组来存订阅者的信息，其次发布者需要准备一个添加订阅的方法，最后准备一个通知订阅者的方法。订阅者需要初始化一下订阅者的新建标准（可在构造函数中完成），准备一个更新方法（订阅之后要干嘛，为什么要订阅），然后new一些订阅者实例对象，最后需要一个发布者对象去把所有的订阅者去添加到对应的数组中，再进行通知，即可完成。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@name</span>:reduceFn</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@author</span>:louchao</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@date</span>:2022/3/18 20:36</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="comment">//收集订阅</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dep</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.subs = []      <span class="comment">//存放所有订阅者信息</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//向subs数组中添加所有订阅者的信息</span></span><br><span class="line">    <span class="function"><span class="title">addSub</span>(<span class="params">watcher</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.subs.push(watcher)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//发布订阅的函数</span></span><br><span class="line">    <span class="function"><span class="title">notify</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.subs.forEach(<span class="function">(<span class="params">watcher</span>)=&gt;</span>&#123;</span><br><span class="line">            watcher.update()</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//订阅者类</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Watcher</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">cb</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.cb = cb        <span class="comment">//把这个函数挂载到自己的身上（watcher实例上）</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//触发回调的方法</span></span><br><span class="line">    <span class="function"><span class="title">update</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.cb()</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//new订阅者实例</span></span><br><span class="line"><span class="keyword">const</span> w1 = <span class="keyword">new</span> Watcher(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;我是第1个订阅者&quot;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">const</span> w2 = <span class="keyword">new</span> Watcher(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;我是第2个订阅者&quot;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//新建发布者实例对象</span></span><br><span class="line"><span class="keyword">const</span> dep = <span class="keyword">new</span> Dep()</span><br><span class="line">dep.addSub(w1)</span><br><span class="line">dep.addSub(w2)</span><br><span class="line"><span class="comment">//发布消息</span></span><br><span class="line">dep.notify()</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="4-发布-订阅者的作用"><a href="#4-发布-订阅者的作用" class="headerlink" title="4.发布-订阅者的作用"></a>4.发布-订阅者的作用</h4><ul>
<li>只要我们为vue中的data数据重新赋值了，这个赋值的动作就会被vue监听到，然后vue要把数据已经发生变化的消息通知到每个订阅者，告诉他们修改DOM</li>
<li>订阅者（DOM）要根据最新的数据，更新自己的内容</li>
</ul>
<h3 id="3-数据劫持"><a href="#3-数据劫持" class="headerlink" title="3.数据劫持"></a>3.数据劫持</h3><h4 id="1-简单实用数据劫持给一层对象添加getter-setter方法"><a href="#1-简单实用数据劫持给一层对象添加getter-setter方法" class="headerlink" title="1.简单实用数据劫持给一层对象添加getter,setter方法"></a>1.简单实用数据劫持给一层对象添加getter,setter方法</h4><ul>
<li><p>定义是这样的：数据劫持指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果</p>
</li>
<li><p>说人话就是，当你想要去修改某个属性时，文档的JS对象会通过某一段代码去帮你修改，JS中数据劫持是通过<code>Object.defineProperty(object,property,&#123;&#125;)</code>这个属性进行修改，上代码就是这样：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span> = <span class="string">&quot;content&quot;</span>&gt;</span>输入框的内容是：<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">id</span>=<span class="string">&quot;input&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> obj = &#123;&#125;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> content = <span class="string">&quot;zhangsan&quot;</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">Object</span>.defineProperty(obj,<span class="string">&#x27;content&#x27;</span>,&#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">get</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">set</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>也就是说，每当我们使用到obj对象里面的content属性的时候，会触发get和set两个函数</p>
<p>比如：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span> = <span class="string">&quot;content&quot;</span>&gt;</span>输入框的内容是：<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">id</span>=<span class="string">&quot;input&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> obj = &#123;&#125;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> content = <span class="string">&quot;zhangsan&quot;</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">Object</span>.defineProperty(obj,<span class="string">&#x27;content&#x27;</span>,&#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">enumerable</span>:<span class="literal">true</span>,    <span class="comment">//当前的属性可以被枚举</span></span></span><br><span class="line"><span class="javascript">    		<span class="attr">configurable</span>:<span class="literal">true</span>,  <span class="comment">//当前的属性可以被配置</span></span></span><br><span class="line"><span class="javascript">            <span class="comment">//每当读取这个属性时触发</span></span></span><br><span class="line"><span class="javascript">            <span class="attr">get</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">return</span> <span class="string">&quot;get被触发了！&quot;</span></span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            <span class="comment">//修改input属性是时触发</span></span></span><br><span class="line"><span class="javascript">            <span class="attr">set</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="built_in">console</span>.log(<span class="string">&quot;set被触发了！&quot;</span>)</span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;)</span></span><br><span class="line"><span class="javascript">        content = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;input&#x27;</span>)</span></span><br><span class="line"><span class="javascript">        addEventListener(<span class="string">&#x27;input&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;  <span class="comment">//监听一下input事件</span></span></span><br><span class="line"><span class="javascript">            obj.content = e.target.value</span></span><br><span class="line"><span class="javascript">            <span class="built_in">console</span>.log(obj.content)</span></span><br><span class="line"><span class="javascript">        &#125;)</span></span><br><span class="line"><span class="javascript">        </span></span><br><span class="line"><span class="javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src="/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/set_target.png" class title="set函数被触发">

<p><strong>在Object.defineProperty(object,property,{})中还要注意两个点</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">enumerable:<span class="literal">true</span>,    <span class="comment">//当前的属性可以被枚举</span></span><br><span class="line"><span class="attr">configurable</span>:<span class="literal">true</span>,  <span class="comment">//当前的属性可以被配置</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(obj,key,&#123;</span><br><span class="line">    <span class="attr">enumerable</span>:<span class="literal">true</span>,    <span class="comment">//当前的属性可以被枚举</span></span><br><span class="line">    <span class="attr">configurable</span>:<span class="literal">true</span>,  <span class="comment">//当前的属性可以被配置</span></span><br><span class="line">    <span class="function"><span class="title">set</span>(<span class="params">v</span>)</span> &#123;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="title">get</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p><strong>set，get数据劫持的原理上一篇博客已经讲得很清楚了</strong></p>
<p>有了这个模式，那么我们只需要在set方法里面通知订阅者，让其做出相应的改变即可</p>
</li>
</ul>
<h4 id="2-使用递归给多层对象属性都添加getter-setter方法"><a href="#2-使用递归给多层对象属性都添加getter-setter方法" class="headerlink" title="2.使用递归给多层对象属性都添加getter,setter方法"></a>2.使用递归给多层对象属性都添加getter,setter方法</h4><ul>
<li><p>假如有这样的一个对象</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">data:&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&quot;zhangsan&quot;</span>,</span><br><span class="line">        <span class="attr">age</span>:<span class="number">20</span>,</span><br><span class="line">        <span class="attr">info</span>:&#123;</span><br><span class="line">           <span class="attr">a</span>:<span class="string">&#x27;a1&#x27;</span>,</span><br><span class="line">           <span class="attr">c</span>:<span class="string">&#x27;c1&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>vue.js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"> * @name:vue</span><br><span class="line"> * @author:louchao</span><br><span class="line"> * @date:<span class="number">2022</span>/<span class="number">3</span>/<span class="number">18</span> <span class="number">22</span>:<span class="number">45</span></span><br><span class="line"> */</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Vue</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.$data = options.data</span><br><span class="line">        <span class="comment">//调用数据劫持的方法</span></span><br><span class="line">        observe(<span class="built_in">this</span>.$data);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">observe</span>(<span class="params">obj</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//使用递归给多层对象属性都添加getter,setter方法</span></span><br><span class="line">    <span class="keyword">if</span> (!obj || <span class="keyword">typeof</span> obj!== <span class="string">&#x27;object&#x27;</span>) <span class="keyword">return</span>     <span class="comment">//递归终止条件</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//通过Object.keys(obj)获取到当前obj的每个属性</span></span><br><span class="line">    <span class="built_in">Object</span>.keys(obj).forEach(<span class="function">(<span class="params">key</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">let</span> value = obj[key]</span><br><span class="line">        <span class="comment">//把value这个子节点进行递归</span></span><br><span class="line">        observe(value)</span><br><span class="line">      <span class="built_in">Object</span>.defineProperty(obj,key,&#123;</span><br><span class="line">          <span class="attr">enumerable</span>:<span class="literal">true</span>,</span><br><span class="line">          <span class="attr">configurable</span>:<span class="literal">true</span>,</span><br><span class="line">          <span class="function"><span class="title">get</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">              <span class="keyword">return</span> value</span><br><span class="line">          &#125;,</span><br><span class="line">          <span class="function"><span class="title">set</span>(<span class="params">newVal</span>)</span> &#123;</span><br><span class="line">              value = newVal</span><br><span class="line">              <span class="comment">//再次递归保证新赋值也存在getter，setter方法</span></span><br><span class="line">              observe(value)</span><br><span class="line">          &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>html</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>姓名是：&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>年龄是：&#123;&#123;age&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">el</span>:<span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">data</span>:&#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">name</span>:<span class="string">&quot;zhangsan&quot;</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">age</span>:<span class="number">20</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">info</span>:&#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">a</span>:<span class="string">&#x27;a1&#x27;</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">c</span>:<span class="string">&#x27;c1&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(vm)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>此时通过递归，info里面的数据也存在了getter和setter方法</p>
<img src="/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/get.png" class title="所有属性都有getter和setter方法"></li>
</ul>
<h4 id="3-属性代理"><a href="#3-属性代理" class="headerlink" title="3.属性代理"></a>3.属性代理</h4><ul>
<li><p>由于在咱们的vue实例中，不存在我们需要的属性，如下图：</p>
<img src="/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/property.png" class title="在vue中不存在我们要的数据">

<p>由图我们可以看到name,age等属性存在于<code>$data</code>里面，也就是说我们要拿到name,age等属性，我们需要使用<code>this.$data.name</code>这样的形式拿到这些属性，而使用<code>this.name</code>这样的方式拿不到，因为this这个对象上根本没有name,age等属性，那怎么办？</p>
<p>解决办法是：</p>
<p>我们可以通过属性代理，把vue.$data上的属性代理到vue上，这样我们就可以通过<code>this.name</code>拿到我们想要的属性了，那怎么代理呢？其实很简单，就是通过数据劫持的方式代理过来。</p>
<p><strong>那我们在哪里进行属性代理呢？</strong>我们期望vue实例一创建，我们的属性代理就完成，因此我们选择把属性代理写在构造函数里面，废话不多说，上代码如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在contructor中</span></span><br><span class="line"> <span class="comment">//属性代理</span></span><br><span class="line"><span class="built_in">Object</span>.keys(<span class="built_in">this</span>.$data).forEach(<span class="function">(<span class="params">key</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,key,&#123;</span><br><span class="line">        <span class="attr">enumerable</span>:<span class="literal">true</span>,</span><br><span class="line">        <span class="attr">configurable</span>:<span class="literal">true</span>,</span><br><span class="line">        <span class="function"><span class="title">get</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="built_in">this</span>.$data[key];</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="function"><span class="title">set</span>(<span class="params">newValue</span>)</span> &#123;</span><br><span class="line">            <span class="built_in">this</span>.$data[key] = newValue;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>解释一下上述代码</p>
<p>首先通过Object.keys方法把<code>$data</code>里的属性都遍历出来，然后逐一代理到this上，得到效果如下图：</p>
<img src="/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/property_proxy.png" class title="通过属性代理使vue实例具备相应的属性"></li>
</ul>
<h2 id="2-文档碎片"><a href="#2-文档碎片" class="headerlink" title="2.文档碎片"></a>2.文档碎片</h2><ul>
<li><p>对于一颗文档树来说，如果不停的创建文档树，就会消耗页面的性能，那么有什么方法可以解决这个问题吗？</p>
<p>有，那就是通过文档碎片来处理</p>
<p><strong>什么是文档碎片？</strong></p>
<p>相信搞过Android开发的同学们一定很清楚Fragment这个东西，Android的Fragment依托于Activity而存在，同样前端DOM树的文档碎片跟Android的理解类似，咱们要创建文档碎片，这个碎片可以看成是一个临时小文档，他把我们需要操作的文档树的某叶子节点放在文档碎片上，在小的文档碎片上完成渲染，渲染完成之后再填充到文档树上，由于文档碎片存在于内存中，可以理解为一个暂存区，临时缓存，这样的优点就是不需要重复的刷新文档树，每次有变化，刷新文档碎片就好，渲染完成一次性移植到文档树上，提高了WEB端性能，提升了体验。</p>
<p><strong>怎么创建文档碎片？</strong></p>
<p><strong>JS</strong>提供了原生的API去创建一个文档碎片，就是</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fragment = <span class="built_in">document</span>.createDocumentFragment();</span><br></pre></td></tr></table></figure>

<p>当我们把文档上的元素放进文档碎片之后，文档上就没有了数据，全部被放进文档碎片里面了</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 模板编译</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>el  是option.el 这里是#app</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>vm  vue实例，就是这个this</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">compile</span>(<span class="params">el,vm</span>)</span>&#123;</span><br><span class="line">    vm.$el = <span class="built_in">document</span>.querySelector(el);    <span class="comment">//把这个DOM元素挂载到vm实例上</span></span><br><span class="line">    <span class="comment">//创建文档碎片</span></span><br><span class="line">    <span class="keyword">const</span> fragment = <span class="built_in">document</span>.createDocumentFragment();</span><br><span class="line">    <span class="comment">//把原DOM树上的所有元素都放进文档碎片中</span></span><br><span class="line">    <span class="keyword">while</span> (childNode = vm.$el.firstChild)&#123;</span><br><span class="line">        fragment.append(childNode);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src="/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/fragment.png" class title="文档碎片的创建导致文档树上的元素被拿走了">

<p>进行一顿操作之后，就可以通过这一行代码把文档碎片的内容放到文档树上</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//把文档碎片的内容放到文档上</span></span><br><span class="line">vm.$el.appendChild(fragment);</span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="3-模板编译"><a href="#3-模板编译" class="headerlink" title="3.模板编译"></a>3.模板编译</h2><ul>
<li><p>定义一个方法，将fragment里面的节点全部解析出来，把插值表达式里面的内容也解析出来</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 定义模板编译函数</span></span><br><span class="line"><span class="comment"> * 由于变量提升，方法提升，所以即使定义到外层，调用的时候也可以征程调用</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="variable">node</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">modelReplace</span>(<span class="params">node</span>) </span>&#123;</span><br><span class="line">    <span class="comment">//定义一个正则表达式,匹配插值表达式</span></span><br><span class="line">    <span class="keyword">const</span> regMustache = <span class="regexp">/\&#123;\&#123;\s*(\S+)\s*\&#125;\&#125;/</span>;</span><br><span class="line">    <span class="comment">//证明当前的节点是文本子节点，需要进行正则替换</span></span><br><span class="line">    <span class="keyword">if</span> (node.nodeType==<span class="number">3</span>)&#123;</span><br><span class="line">        <span class="comment">//文本子节点是一个DOM对象，想要获取其内容，需要调用节点的textContent属性获取</span></span><br><span class="line">        <span class="comment">// console.log(node.textContent);</span></span><br><span class="line">        <span class="keyword">const</span> text = node.textContent;</span><br><span class="line">        <span class="comment">//进行字符串的正则匹配</span></span><br><span class="line">        <span class="keyword">const</span> execResult = regMustache.exec(text);</span><br><span class="line">        <span class="built_in">console</span>.log(execResult)</span><br><span class="line">        <span class="comment">//终止递归条件</span></span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//不是文本节点,可能是一个DOM元素，需要进行递归处理</span></span><br><span class="line">    node.childNodes.forEach(<span class="function">(<span class="params">child</span>)=&gt;</span>&#123;modelReplace(child)&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>通过正则匹配把插值表达式的值拿出来，如下图</p>
<img src="/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/regPlace.png" class title="正则匹配">

<p>如上图，很明显我们需要替换到索引为<strong>0</strong>的这一项，索引为1的这一项是属性的名字</p>
</li>
<li><p>模板编译函数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 定义模板编译函数</span></span><br><span class="line"><span class="comment"> * 由于变量提升，方法提升，所以即使定义到外层，调用的时候也可以征程调用</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="variable">node</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">modelReplace</span>(<span class="params">node</span>) </span>&#123;</span><br><span class="line">    <span class="comment">//定义一个正则表达式,匹配插值表达式</span></span><br><span class="line">    <span class="keyword">const</span> regMustache = <span class="regexp">/\&#123;\&#123;\s*(\S+)\s*\&#125;\&#125;/</span>;</span><br><span class="line">    <span class="comment">//证明当前的节点是文本子节点，需要进行正则替换</span></span><br><span class="line">    <span class="keyword">if</span> (node.nodeType==<span class="number">3</span>)&#123;</span><br><span class="line">        <span class="comment">//文本子节点是一个DOM对象，想要获取其内容，需要调用节点的textContent属性获取</span></span><br><span class="line">        <span class="comment">// console.log(node.textContent);</span></span><br><span class="line">        <span class="keyword">const</span> text = node.textContent;</span><br><span class="line">        <span class="comment">//进行字符串的正则匹配</span></span><br><span class="line">        <span class="keyword">const</span> execResult = regMustache.exec(text);</span><br><span class="line">        <span class="comment">// console.log(execResult)</span></span><br><span class="line">        <span class="keyword">if</span> (execResult)&#123;</span><br><span class="line">            <span class="comment">// console.log(vm[execResult[1]])</span></span><br><span class="line">            <span class="comment">//把所有属性的值都将进行一个reduce遍历</span></span><br><span class="line">            <span class="keyword">const</span> value = execResult[<span class="number">1</span>].split(<span class="string">&#x27;.&#x27;</span>).reduce(<span class="function">(<span class="params">newObj,key</span>)=&gt;</span>&#123;</span><br><span class="line">                <span class="keyword">return</span> newObj[key]&#125;,vm);</span><br><span class="line">            <span class="comment">// console.log(value);</span></span><br><span class="line">            <span class="comment">//把通过reduce遍历得到的值赋值给node.textContent</span></span><br><span class="line">            node.textContent = text.replace(regMustache,value);</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">//终止递归条件</span></span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//不是文本节点,可能是一个DOM元素，需要进行递归处理</span></span><br><span class="line">    node.childNodes.forEach(<span class="function">(<span class="params">child</span>)=&gt;</span>&#123;modelReplace(child)&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="4-发布-订阅者模式的运用"><a href="#4-发布-订阅者模式的运用" class="headerlink" title="4.发布-订阅者模式的运用"></a>4.发布-订阅者模式的运用</h2><ul>
<li><p>通过所有的DOM元素去订阅替换的这个消息，只要数据发生改变，所有的DOM元素（跟变化数据有关的）都发生变化</p>
<p><strong>发布者类</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//发布者类(收集Watcher订阅者类)</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dep</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="comment">//所有的watcher都被存到这个数组中</span></span><br><span class="line">        <span class="built_in">this</span>.subs = [];</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//往数组里面追加watcher</span></span><br><span class="line">    <span class="function"><span class="title">addSub</span>(<span class="params">watcher</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.subs.push(watcher);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//通知</span></span><br><span class="line">    <span class="function"><span class="title">notify</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.subs.forEach(<span class="function">(<span class="params">watcher</span>)=&gt;</span>&#123;watcher.update()&#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>订阅者类</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Watcher</span> </span>&#123;</span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param </span>vm    vm中保存着最新的数据</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param </span>key   在vm上众多的数据中，根据key来确定更新哪一个值，在new watcher期间，指定watcher对应的数据的名字</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param </span>cb    如何去更新自己</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">vm,key,cb</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.vm = vm;</span><br><span class="line">        <span class="built_in">this</span>.cb = cb;</span><br><span class="line">        <span class="built_in">this</span>.cb = cb;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//能让发布者通知我</span></span><br><span class="line">    <span class="function"><span class="title">update</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.cb();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>创建发布者和订阅者的时机？</p>
<p>应该在能够确定找到最后一个属性，并且能够匹配正则表达式的时候创建</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (execResult)&#123;</span><br><span class="line">    <span class="comment">// console.log(vm[execResult[1]])</span></span><br><span class="line">    <span class="comment">//把所有属性的值都将进行一个reduce遍历</span></span><br><span class="line">    <span class="keyword">const</span> value = execResult[<span class="number">1</span>].split(<span class="string">&#x27;.&#x27;</span>).reduce(<span class="function">(<span class="params">newObj,key</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> newObj[key]&#125;,vm);</span><br><span class="line">    <span class="comment">// console.log(value);</span></span><br><span class="line">    <span class="comment">//把通过reduce遍历得到的值赋值给node.textContent</span></span><br><span class="line">    node.textContent = text.replace(regMustache,value);</span><br><span class="line">    <span class="comment">//在这里创建Watcher实例</span></span><br><span class="line">    <span class="keyword">new</span> Watcher(vm,execResult[<span class="number">1</span>],<span class="function">(<span class="params">newValue</span>)=&gt;</span>&#123;</span><br><span class="line">        node.textContent = text.replace(regMustache,newValue);</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>通过这个操作，添加watcher实例到Dep里面的数组中</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在构造函数里面把watcher存到数组里面</span></span><br><span class="line"><span class="comment">//下面三行代码吧创建的额watcher实例存到Dep实例的subs数组中</span></span><br><span class="line">Dep.target = <span class="built_in">this</span>;      <span class="comment">//this就是watcher实例</span></span><br><span class="line"><span class="comment">//这一行代码主要是让他去出发getter方法</span></span><br><span class="line">key.split(<span class="string">&#x27;.&#x27;</span>).reduce(<span class="function">(<span class="params">newObj,k</span>)=&gt;</span>newObj[k],vm);    <span class="comment">//每一次创建实例，会在这里取一次值给vm，会触发getter</span></span><br><span class="line">Dep.target = <span class="literal">null</span>;</span><br></pre></td></tr></table></figure>

<p>直接在这里的get里面进行添加</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">observe</span>(<span class="params">obj</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//使用递归给多层对象属性都添加getter,setter方法</span></span><br><span class="line">    <span class="keyword">if</span> (!obj || <span class="keyword">typeof</span> obj!== <span class="string">&#x27;object&#x27;</span>) <span class="keyword">return</span>     <span class="comment">//递归终止条件</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> dep = <span class="keyword">new</span> Dep();</span><br><span class="line"></span><br><span class="line">    <span class="comment">//通过Object.keys(obj)获取到当前obj的每个属性</span></span><br><span class="line">    <span class="built_in">Object</span>.keys(obj).forEach(<span class="function">(<span class="params">key</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">let</span> value = obj[key]</span><br><span class="line">        <span class="comment">//把value这个子节点进行递归</span></span><br><span class="line">        observe(value)</span><br><span class="line">        <span class="built_in">Object</span>.defineProperty(obj,key,&#123;</span><br><span class="line">            <span class="attr">enumerable</span>:<span class="literal">true</span>,</span><br><span class="line">            <span class="attr">configurable</span>:<span class="literal">true</span>,</span><br><span class="line">            <span class="function"><span class="title">get</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">                <span class="comment">//从watcher构造函数那里跳过来执行这里，因为那里给vm取值赋值会触发这里的函数</span></span><br><span class="line">                <span class="comment">//Dep.target</span></span><br><span class="line">                <span class="comment">//只要在这里执行了这一行，那么被new出来的watcher实例就被放在dep.subs数组中了</span></span><br><span class="line">                Dep.target &amp;&amp; dep.addSub(Dep.target);</span><br><span class="line">                <span class="keyword">return</span> value</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="function"><span class="title">set</span>(<span class="params">v</span>)</span> &#123;</span><br><span class="line">                value = v</span><br><span class="line">                observe(value)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>在set被触发的时候，通知所有的订阅者</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//这是observe函数的setter  </span></span><br><span class="line"><span class="function"><span class="title">set</span>(<span class="params">newVal</span>)</span> &#123;</span><br><span class="line">      value = newVal</span><br><span class="line">      observe(value);</span><br><span class="line">      <span class="comment">//通知每一个订阅者</span></span><br><span class="line">      dep.notify();</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>在Watcher类里面的update接收新的值，改变的值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">update</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//把新的值传给回调函数,新的值来自于this.key</span></span><br><span class="line">    <span class="keyword">const</span> value = <span class="built_in">this</span>.key.split(<span class="string">&#x27;.&#x27;</span>).reduce(<span class="function">(<span class="params">newObj,key</span>)=&gt;</span>&#123;<span class="keyword">return</span> newObj[key]&#125;,<span class="built_in">this</span>.vm)</span><br><span class="line">    <span class="built_in">this</span>.cb(value);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>此时，实现了数据的单向绑定</strong></p>
<p>即 <strong>数据发生改变=&gt;视图的数据发生了改变</strong></p>
</li>
<li><p>处理一下输入框的内容</p>
</li>
<li><p>当nodeType为1的时候，且当元素是输入框的时候，进行操作</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">//判断当前的node节点是否为INPUT输入框</span></span><br><span class="line"><span class="keyword">if</span> (node.nodeType == <span class="number">1</span> &amp;&amp; node.tagName.toUpperCase() ===<span class="string">&#x27;INPUT&#x27;</span>)&#123;</span><br><span class="line">    <span class="comment">// const attrs = node.attributes;</span></span><br><span class="line">    <span class="comment">// console.log(attrs);</span></span><br><span class="line">    <span class="comment">//把伪数组转换成真的数组</span></span><br><span class="line">    <span class="keyword">const</span> attrs = <span class="built_in">Array</span>.from(node.attributes);</span><br><span class="line">    <span class="comment">//查找是否具备v-model这个属性</span></span><br><span class="line">    <span class="keyword">const</span> findResult = attrs.find(<span class="function">(<span class="params">value</span>) =&gt;</span> value.name === <span class="string">&#x27;v-model&#x27;</span>);</span><br><span class="line">    <span class="comment">// console.log(findResult)</span></span><br><span class="line">    <span class="keyword">if</span> (findResult)&#123;</span><br><span class="line">        <span class="comment">//获取到当前v-model的属性的值</span></span><br><span class="line">        <span class="keyword">const</span> expStr = findResult.value</span><br><span class="line">        <span class="comment">// console.log(expStr);</span></span><br><span class="line">        <span class="keyword">const</span> value = expStr.split(<span class="string">&#x27;.&#x27;</span>).reduce(<span class="function">(<span class="params">newObj,key</span>)=&gt;</span>newObj[key],vm);</span><br><span class="line">        <span class="comment">// console.log(res);</span></span><br><span class="line">        node.value = value;</span><br><span class="line">        <span class="comment">//创建Watcher实例，把更新的方法放在里面</span></span><br><span class="line">        <span class="keyword">new</span> Watcher(vm,expStr,<span class="function">(<span class="params">newVal</span>)=&gt;</span>&#123;</span><br><span class="line">            node.value = newVal;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="5-单向绑定"><a href="#5-单向绑定" class="headerlink" title="5.单向绑定"></a>5.单向绑定</h2><ul>
<li><p>目前已经完成了单向数据绑定</p>
</li>
<li><p>html如下</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>姓名是：&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>年龄是：&#123;&#123;age&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>info.a的值是：&#123;&#123;info.a&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>name的值：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;name&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>info.a的值：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;info.a&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">el</span>:<span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">data</span>:&#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">name</span>:<span class="string">&quot;zhangsan&quot;</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">age</span>:<span class="number">20</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">info</span>:&#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">a</span>:<span class="string">&#x27;a1&#x27;</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">c</span>:<span class="string">&#x27;c1&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(vm)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>vue.js如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@name</span>:vue</span></span><br><span class="line"><span class="comment">* <span class="doctag">@author</span>:louchao</span></span><br><span class="line"><span class="comment">* <span class="doctag">@date</span>:2022/3/18 22:45</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Vue</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.$data = options.data</span><br><span class="line">        <span class="comment">//调用数据劫持的方法</span></span><br><span class="line">        observe(<span class="built_in">this</span>.$data);</span><br><span class="line">        <span class="comment">//属性代理</span></span><br><span class="line">        <span class="built_in">Object</span>.keys(<span class="built_in">this</span>.$data).forEach(<span class="function">(<span class="params">key</span>)=&gt;</span>&#123;</span><br><span class="line">            <span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,key,&#123;</span><br><span class="line">                <span class="attr">enumerable</span>:<span class="literal">true</span>,</span><br><span class="line">                <span class="attr">configurable</span>:<span class="literal">true</span>,</span><br><span class="line">                <span class="function"><span class="title">get</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">                    <span class="keyword">return</span> <span class="built_in">this</span>.$data[key];</span><br><span class="line">                &#125;,</span><br><span class="line">                <span class="function"><span class="title">set</span>(<span class="params">newValue</span>)</span> &#123;</span><br><span class="line">                    <span class="built_in">this</span>.$data[key] = newValue;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line">        <span class="comment">//调用模板编译</span></span><br><span class="line">        compile(options.el,<span class="built_in">this</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">observe</span>(<span class="params">obj</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//使用递归给多层对象属性都添加getter,setter方法</span></span><br><span class="line">    <span class="keyword">if</span> (!obj || <span class="keyword">typeof</span> obj!== <span class="string">&#x27;object&#x27;</span>) <span class="keyword">return</span>     <span class="comment">//递归终止条件</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> dep = <span class="keyword">new</span> Dep();</span><br><span class="line"></span><br><span class="line">    <span class="comment">//通过Object.keys(obj)获取到当前obj的每个属性</span></span><br><span class="line">    <span class="built_in">Object</span>.keys(obj).forEach(<span class="function">(<span class="params">key</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">let</span> value = obj[key]</span><br><span class="line">        <span class="comment">//把value这个子节点进行递归</span></span><br><span class="line">        observe(value)</span><br><span class="line">        <span class="built_in">Object</span>.defineProperty(obj,key,&#123;</span><br><span class="line">            <span class="attr">enumerable</span>:<span class="literal">true</span>,</span><br><span class="line">            <span class="attr">configurable</span>:<span class="literal">true</span>,</span><br><span class="line">            <span class="function"><span class="title">get</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">                <span class="comment">//从watcher构造函数那里跳过来执行这里，因为那里给vm取值赋值会触发这里的函数</span></span><br><span class="line">                <span class="comment">//Dep.target</span></span><br><span class="line">                <span class="comment">//只要在这里执行了这一行，那么被new出来的watcher实例就被放在dep.subs数组中了</span></span><br><span class="line">                Dep.target &amp;&amp; dep.addSub(Dep.target);</span><br><span class="line">                <span class="keyword">return</span> value</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="function"><span class="title">set</span>(<span class="params">newVal</span>)</span> &#123;</span><br><span class="line">                value = newVal</span><br><span class="line">                observe(value);</span><br><span class="line">                <span class="comment">//通知每一个订阅者</span></span><br><span class="line">                dep.notify();</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 模板编译</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>el  是option.el 这里是#app</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>vm  vue实例，就是这个this</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">compile</span>(<span class="params">el,vm</span>)</span>&#123;</span><br><span class="line">    vm.$el = <span class="built_in">document</span>.querySelector(el);    <span class="comment">//把这个DOM元素挂载到vm实例上</span></span><br><span class="line">    <span class="comment">//创建文档碎片</span></span><br><span class="line">    <span class="keyword">const</span> fragment = <span class="built_in">document</span>.createDocumentFragment();</span><br><span class="line">    <span class="comment">//把原DOM树上的所有元素都放进文档碎片中</span></span><br><span class="line">    <span class="keyword">while</span> (childNode = vm.$el.firstChild)&#123;</span><br><span class="line">        fragment.append(childNode);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//在这里进行模板编译</span></span><br><span class="line">    modelReplace(fragment);</span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 定义模板编译函数</span></span><br><span class="line"><span class="comment">     * 由于变量提升，方法提升，所以即使定义到外层，调用的时候也可以征程调用</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="variable">node</span></span></span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">modelReplace</span>(<span class="params">node</span>) </span>&#123;</span><br><span class="line">        <span class="comment">//定义一个正则表达式,匹配插值表达式</span></span><br><span class="line">        <span class="keyword">const</span> regMustache = <span class="regexp">/\&#123;\&#123;\s*(\S+)\s*\&#125;\&#125;/</span>;</span><br><span class="line">        <span class="comment">//证明当前的节点是文本子节点，需要进行正则替换</span></span><br><span class="line">        <span class="keyword">if</span> (node.nodeType==<span class="number">3</span>)&#123;</span><br><span class="line">            <span class="comment">//文本子节点是一个DOM对象，想要获取其内容，需要调用节点的textContent属性获取</span></span><br><span class="line">            <span class="comment">// console.log(node.textContent);</span></span><br><span class="line">            <span class="keyword">const</span> text = node.textContent;</span><br><span class="line">            <span class="comment">//进行字符串的正则匹配</span></span><br><span class="line">            <span class="keyword">const</span> execResult = regMustache.exec(text);</span><br><span class="line">            <span class="comment">// console.log(execResult)</span></span><br><span class="line">            <span class="keyword">if</span> (execResult)&#123;</span><br><span class="line">                <span class="comment">// console.log(vm[execResult[1]])</span></span><br><span class="line">                <span class="comment">//把所有属性的值都将进行一个reduce遍历</span></span><br><span class="line">                <span class="keyword">const</span> value = execResult[<span class="number">1</span>].split(<span class="string">&#x27;.&#x27;</span>).reduce(<span class="function">(<span class="params">newObj,key</span>)=&gt;</span>&#123;</span><br><span class="line">                    <span class="keyword">return</span> newObj[key]&#125;,vm);</span><br><span class="line">                <span class="comment">// console.log(value);</span></span><br><span class="line">                <span class="comment">//把通过reduce遍历得到的值赋值给node.textContent</span></span><br><span class="line">                node.textContent = text.replace(regMustache,value);</span><br><span class="line">                <span class="comment">//在这里创建Watcher实例</span></span><br><span class="line">                <span class="keyword">new</span> Watcher(vm,execResult[<span class="number">1</span>],<span class="function">(<span class="params">newValue</span>)=&gt;</span>&#123;</span><br><span class="line">                    node.textContent = text.replace(regMustache,newValue);</span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="comment">//终止递归条件</span></span><br><span class="line">            <span class="keyword">return</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">//判断当前的node节点是否为INPUT输入框</span></span><br><span class="line">        <span class="keyword">if</span> (node.nodeType == <span class="number">1</span> &amp;&amp; node.tagName.toUpperCase() ===<span class="string">&#x27;INPUT&#x27;</span>)&#123;</span><br><span class="line">            <span class="comment">// const attrs = node.attributes;</span></span><br><span class="line">            <span class="comment">// console.log(attrs);</span></span><br><span class="line">            <span class="comment">//把伪数组转换成真的数组</span></span><br><span class="line">            <span class="keyword">const</span> attrs = <span class="built_in">Array</span>.from(node.attributes);</span><br><span class="line">            <span class="comment">//查找是否具备v-model这个属性</span></span><br><span class="line">            <span class="keyword">const</span> findResult = attrs.find(<span class="function">(<span class="params">value</span>) =&gt;</span> value.name === <span class="string">&#x27;v-model&#x27;</span>);</span><br><span class="line">            <span class="comment">// console.log(findResult)</span></span><br><span class="line">            <span class="keyword">if</span> (findResult)&#123;</span><br><span class="line">                <span class="comment">//获取到当前v-model的属性的值</span></span><br><span class="line">                <span class="keyword">const</span> expStr = findResult.value</span><br><span class="line">                <span class="comment">// console.log(expStr);</span></span><br><span class="line">                <span class="keyword">const</span> value = expStr.split(<span class="string">&#x27;.&#x27;</span>).reduce(<span class="function">(<span class="params">newObj,key</span>)=&gt;</span>newObj[key],vm);</span><br><span class="line">                <span class="comment">// console.log(res);</span></span><br><span class="line">                node.value = value;</span><br><span class="line">                <span class="comment">//创建Watcher实例，把更新的方法放在里面</span></span><br><span class="line">                <span class="keyword">new</span> Watcher(vm,expStr,<span class="function">(<span class="params">newVal</span>)=&gt;</span>&#123;</span><br><span class="line">                    node.value = newVal;</span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="comment">//不是文本节点,可能是一个DOM元素，需要进行递归处理</span></span><br><span class="line">        node.childNodes.forEach(<span class="function">(<span class="params">child</span>)=&gt;</span>&#123;modelReplace(child)&#125;);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//把文档碎片的内容放到文档上</span></span><br><span class="line">    vm.$el.appendChild(fragment);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//发布者类(收集Watcher订阅者类)</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dep</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="comment">//所有的watcher都被存到这个数组中</span></span><br><span class="line">        <span class="built_in">this</span>.subs = [];</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//往数组里面追加watcher</span></span><br><span class="line">    <span class="function"><span class="title">addSub</span>(<span class="params">watcher</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.subs.push(watcher);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//通知</span></span><br><span class="line">    <span class="function"><span class="title">notify</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.subs.forEach(<span class="function">(<span class="params">watcher</span>)=&gt;</span>&#123;watcher.update()&#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Watcher</span> </span>&#123;</span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param </span>vm    vm中保存着最新的数据</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param </span>key   在vm上众多的数据中，根据key来确定更新哪一个值，在new watcher期间，指定watcher对应的数据的名字</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param </span>cb    如何去更新自己</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">vm,key,cb</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.vm = vm;</span><br><span class="line">        <span class="built_in">this</span>.key = key;</span><br><span class="line">        <span class="built_in">this</span>.cb = cb;</span><br><span class="line">        <span class="comment">//在构造函数里面把watcher存到数组里面</span></span><br><span class="line">        <span class="comment">//下面三行代码吧创建的额watcher实例存到Dep实例的subs数组中</span></span><br><span class="line">        Dep.target = <span class="built_in">this</span>;      <span class="comment">//this就是watcher实例</span></span><br><span class="line">        <span class="comment">//这一行代码主要是让他去出发getter方法</span></span><br><span class="line">        key.split(<span class="string">&#x27;.&#x27;</span>).reduce(<span class="function">(<span class="params">newObj,k</span>)=&gt;</span>newObj[k],vm);    <span class="comment">//每一次创建实例，会在这里取一次值给vm，会触发getter</span></span><br><span class="line">        Dep.target = <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//能让发布者通知我</span></span><br><span class="line">    <span class="function"><span class="title">update</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="comment">//把新的值传给回调函数,新的值来自于this.key</span></span><br><span class="line">        <span class="keyword">const</span> value = <span class="built_in">this</span>.key.split(<span class="string">&#x27;.&#x27;</span>).reduce(<span class="function">(<span class="params">newObj,key</span>)=&gt;</span>&#123;<span class="keyword">return</span> newObj[key]&#125;,<span class="built_in">this</span>.vm)</span><br><span class="line">        <span class="built_in">this</span>.cb(value);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>一直说单向，何为单向？</p>
<p>单向双向是针对视图和数据来说的，当视图更改，数据不更改，或者数据更改，视图更改时为单向，但是视图能够驱动数据更改而继续更改视图时，为双向。我在这里做个图说明一下。</p>
<img src="/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/p1.png" class title="此时视图和数据保持一致">

<img src="/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/p2.png" class title="此时数据更改，视图也更改了">

<img src="/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/p3.png" class title="此时视图1更改，但是无法更改数据2，也无法驱动视图3进行更改">

<p><strong>路人：明白了，兄弟原来这TM叫单向啊?，那聊聊双向？</strong></p>
<img src="/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/p4.png" class title="此时视图1更改，能更改数据2，也能驱动视图3进行更改">

<p>也就是这样，原来的时候name的初始值是zhangsan,现在我通过输入框1更改为zhangsanwww，这里驱动了数据2更改，导致vm.name变成了zhangsanwww,此时由于数据更改，导致了视图3的值变成了zhangsanwww,换句话说就是输入框的值，改变了，导致上述文本的值改变了，这就是双向数据绑定。</p>
<img src="/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/p5.png" class title="单向流图">

<img src="/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/p6.png" class title="双向流图">

<p><strong>路人：懂了，就是这个意思？那怎么实现呢？</strong></p>
<p><strong>我：别急，听我慢慢道来</strong></p>
</li>
</ul>
<h2 id="6-双向绑定"><a href="#6-双向绑定" class="headerlink" title="6.双向绑定"></a>6.双向绑定</h2><ul>
<li><p>基于以上单向数据绑定的理解，相信双向绑定也差不多懂了，其实实现很简单，我们只需要监听文本框的输入事件，拿到文本框最新的值更新到vm上，就可以实现了<strong>页面</strong>到**<code>data</code>**的传递</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//监听文本框的输入事件，拿到文本框最新的值更新到vm上</span></span><br><span class="line">node.addEventListener(<span class="string">&#x27;input&#x27;</span>,<span class="function">(<span class="params">e</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="comment">// console.log(e.target.value)</span></span><br><span class="line">    <span class="comment">//通过拿到倒数第二项，然后使用[]的形式进行赋值</span></span><br><span class="line">    <span class="comment">//对数组进行分割</span></span><br><span class="line">    <span class="keyword">const</span> keyArr = expStr.split(<span class="string">&#x27;.&#x27;</span>);</span><br><span class="line">    <span class="comment">//slice截取数组，不包括右区间</span></span><br><span class="line">    keyArr.slice(<span class="number">0</span>,keyArr.length-<span class="number">1</span>).reduce(<span class="function">(<span class="params">newObj,key</span>)=&gt;</span>&#123;<span class="keyword">return</span> newObj[key]&#125;,vm);</span><br><span class="line">    <span class="comment">//赋值</span></span><br><span class="line">    obj[keyArr[keyArr.length-<span class="number">1</span>]] = e.target.value;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
<li><p>好，功能函数如此，那就，上代码（<strong>完整的</strong>）：</p>
</li>
<li><p>html:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>姓名是：&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>年龄是：&#123;&#123;age&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>info.a的值是：&#123;&#123;info.a&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>name的值：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;name&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>info.a的值：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;info.a&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">el</span>:<span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">data</span>:&#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">name</span>:<span class="string">&quot;zhangsan&quot;</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">age</span>:<span class="number">20</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">info</span>:&#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">a</span>:<span class="string">&#x27;a1&#x27;</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">c</span>:<span class="string">&#x27;c1&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(vm)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>vue.js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@name</span>:vue</span></span><br><span class="line"><span class="comment">* <span class="doctag">@author</span>:louchao</span></span><br><span class="line"><span class="comment">* <span class="doctag">@date</span>:2022/3/18 22:45</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Vue</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">options</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.$data = options.data</span><br><span class="line">        <span class="comment">//调用数据劫持的方法</span></span><br><span class="line">        observe(<span class="built_in">this</span>.$data);</span><br><span class="line">        <span class="comment">//属性代理</span></span><br><span class="line">        <span class="built_in">Object</span>.keys(<span class="built_in">this</span>.$data).forEach(<span class="function">(<span class="params">key</span>)=&gt;</span>&#123;</span><br><span class="line">            <span class="built_in">Object</span>.defineProperty(<span class="built_in">this</span>,key,&#123;</span><br><span class="line">                <span class="attr">enumerable</span>:<span class="literal">true</span>,</span><br><span class="line">                <span class="attr">configurable</span>:<span class="literal">true</span>,</span><br><span class="line">                <span class="function"><span class="title">get</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">                    <span class="keyword">return</span> <span class="built_in">this</span>.$data[key];</span><br><span class="line">                &#125;,</span><br><span class="line">                <span class="function"><span class="title">set</span>(<span class="params">newValue</span>)</span> &#123;</span><br><span class="line">                    <span class="built_in">this</span>.$data[key] = newValue;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line">        <span class="comment">//调用模板编译</span></span><br><span class="line">        compile(options.el,<span class="built_in">this</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">observe</span>(<span class="params">obj</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//使用递归给多层对象属性都添加getter,setter方法</span></span><br><span class="line">    <span class="keyword">if</span> (!obj || <span class="keyword">typeof</span> obj!== <span class="string">&#x27;object&#x27;</span>) <span class="keyword">return</span>     <span class="comment">//递归终止条件</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> dep = <span class="keyword">new</span> Dep();</span><br><span class="line"></span><br><span class="line">    <span class="comment">//通过Object.keys(obj)获取到当前obj的每个属性</span></span><br><span class="line">    <span class="built_in">Object</span>.keys(obj).forEach(<span class="function">(<span class="params">key</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">let</span> value = obj[key]</span><br><span class="line">        <span class="comment">//把value这个子节点进行递归</span></span><br><span class="line">        observe(value)</span><br><span class="line">        <span class="built_in">Object</span>.defineProperty(obj,key,&#123;</span><br><span class="line">            <span class="attr">enumerable</span>:<span class="literal">true</span>,</span><br><span class="line">            <span class="attr">configurable</span>:<span class="literal">true</span>,</span><br><span class="line">            <span class="function"><span class="title">get</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">                <span class="comment">//从watcher构造函数那里跳过来执行这里，因为那里给vm取值赋值会触发这里的函数</span></span><br><span class="line">                <span class="comment">//Dep.target</span></span><br><span class="line">                <span class="comment">//只要在这里执行了这一行，那么被new出来的watcher实例就被放在dep.subs数组中了</span></span><br><span class="line">                Dep.target &amp;&amp; dep.addSub(Dep.target);</span><br><span class="line">                <span class="keyword">return</span> value</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="function"><span class="title">set</span>(<span class="params">newVal</span>)</span> &#123;</span><br><span class="line">                value = newVal</span><br><span class="line">                observe(value);</span><br><span class="line">                <span class="comment">//通知每一个订阅者</span></span><br><span class="line">                dep.notify();</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 模板编译</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>el  是option.el 这里是#app</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>vm  vue实例，就是这个this</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">compile</span>(<span class="params">el,vm</span>)</span>&#123;</span><br><span class="line">    vm.$el = <span class="built_in">document</span>.querySelector(el);    <span class="comment">//把这个DOM元素挂载到vm实例上</span></span><br><span class="line">    <span class="comment">//创建文档碎片</span></span><br><span class="line">    <span class="keyword">const</span> fragment = <span class="built_in">document</span>.createDocumentFragment();</span><br><span class="line">    <span class="comment">//把原DOM树上的所有元素都放进文档碎片中</span></span><br><span class="line">    <span class="keyword">while</span> (childNode = vm.$el.firstChild)&#123;</span><br><span class="line">        fragment.append(childNode);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//在这里进行模板编译</span></span><br><span class="line">    modelReplace(fragment);</span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 定义模板编译函数</span></span><br><span class="line"><span class="comment">     * 由于变量提升，方法提升，所以即使定义到外层，调用的时候也可以征程调用</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="variable">node</span></span></span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">modelReplace</span>(<span class="params">node</span>) </span>&#123;</span><br><span class="line">        <span class="comment">//定义一个正则表达式,匹配插值表达式</span></span><br><span class="line">        <span class="keyword">const</span> regMustache = <span class="regexp">/\&#123;\&#123;\s*(\S+)\s*\&#125;\&#125;/</span>;</span><br><span class="line">        <span class="comment">//证明当前的节点是文本子节点，需要进行正则替换</span></span><br><span class="line">        <span class="keyword">if</span> (node.nodeType==<span class="number">3</span>)&#123;</span><br><span class="line">            <span class="comment">//文本子节点是一个DOM对象，想要获取其内容，需要调用节点的textContent属性获取</span></span><br><span class="line">            <span class="comment">// console.log(node.textContent);</span></span><br><span class="line">            <span class="keyword">const</span> text = node.textContent;</span><br><span class="line">            <span class="comment">//进行字符串的正则匹配</span></span><br><span class="line">            <span class="keyword">const</span> execResult = regMustache.exec(text);</span><br><span class="line">            <span class="comment">// console.log(execResult)</span></span><br><span class="line">            <span class="keyword">if</span> (execResult)&#123;</span><br><span class="line">                <span class="comment">// console.log(vm[execResult[1]])</span></span><br><span class="line">                <span class="comment">//把所有属性的值都将进行一个reduce遍历</span></span><br><span class="line">                <span class="keyword">const</span> value = execResult[<span class="number">1</span>].split(<span class="string">&#x27;.&#x27;</span>).reduce(<span class="function">(<span class="params">newObj,key</span>)=&gt;</span>&#123;</span><br><span class="line">                    <span class="keyword">return</span> newObj[key]&#125;,vm);</span><br><span class="line">                <span class="comment">// console.log(value);</span></span><br><span class="line">                <span class="comment">//把通过reduce遍历得到的值赋值给node.textContent</span></span><br><span class="line">                node.textContent = text.replace(regMustache,value);</span><br><span class="line">                <span class="comment">//在这里创建Watcher实例</span></span><br><span class="line">                <span class="keyword">new</span> Watcher(vm,execResult[<span class="number">1</span>],<span class="function">(<span class="params">newValue</span>)=&gt;</span>&#123;</span><br><span class="line">                    node.textContent = text.replace(regMustache,newValue);</span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="comment">//终止递归条件</span></span><br><span class="line">            <span class="keyword">return</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">//判断当前的node节点是否为INPUT输入框</span></span><br><span class="line">        <span class="keyword">if</span> (node.nodeType == <span class="number">1</span> &amp;&amp; node.tagName.toUpperCase() ===<span class="string">&#x27;INPUT&#x27;</span>)&#123;</span><br><span class="line">            <span class="comment">// const attrs = node.attributes;</span></span><br><span class="line">            <span class="comment">// console.log(attrs);</span></span><br><span class="line">            <span class="comment">//把伪数组转换成真的数组</span></span><br><span class="line">            <span class="keyword">const</span> attrs = <span class="built_in">Array</span>.from(node.attributes);</span><br><span class="line">            <span class="comment">//查找是否具备v-model这个属性</span></span><br><span class="line">            <span class="keyword">const</span> findResult = attrs.find(<span class="function">(<span class="params">value</span>) =&gt;</span> value.name === <span class="string">&#x27;v-model&#x27;</span>);</span><br><span class="line">            <span class="comment">// console.log(findResult)</span></span><br><span class="line">            <span class="keyword">if</span> (findResult)&#123;</span><br><span class="line">                <span class="comment">//获取到当前v-model的属性的值</span></span><br><span class="line">                <span class="keyword">const</span> expStr = findResult.value</span><br><span class="line">                <span class="comment">// console.log(expStr);</span></span><br><span class="line">                <span class="keyword">const</span> value = expStr.split(<span class="string">&#x27;.&#x27;</span>).reduce(<span class="function">(<span class="params">newObj,key</span>)=&gt;</span>newObj[key],vm);</span><br><span class="line">                <span class="comment">// console.log(res);</span></span><br><span class="line">                node.value = value;</span><br><span class="line">                <span class="comment">//创建Watcher实例，把更新的方法放在里面</span></span><br><span class="line">                <span class="keyword">new</span> Watcher(vm,expStr,<span class="function">(<span class="params">newVal</span>)=&gt;</span>&#123;</span><br><span class="line">                    node.value = newVal;</span><br><span class="line">                &#125;)</span><br><span class="line"></span><br><span class="line">                <span class="comment">//监听文本框的输入事件，拿到文本框最新的值更新到vm上</span></span><br><span class="line">                node.addEventListener(<span class="string">&#x27;input&#x27;</span>,<span class="function">(<span class="params">e</span>)=&gt;</span>&#123;</span><br><span class="line">                    <span class="comment">// console.log(e.target.value)</span></span><br><span class="line">                    <span class="comment">//通过拿到倒数第二项，然后使用[]的形式进行赋值</span></span><br><span class="line">                    <span class="comment">//对数组进行分割</span></span><br><span class="line">                    <span class="keyword">const</span> keyArr = expStr.split(<span class="string">&#x27;.&#x27;</span>);</span><br><span class="line">                    <span class="comment">//slice截取数组，不包括右区间</span></span><br><span class="line">                    <span class="keyword">const</span> obj = keyArr.slice(<span class="number">0</span>,keyArr.length-<span class="number">1</span>).reduce(<span class="function">(<span class="params">newObj,key</span>)=&gt;</span>&#123;<span class="keyword">return</span> newObj[key]&#125;,vm);</span><br><span class="line">                    <span class="comment">//赋值</span></span><br><span class="line">                    obj[keyArr[keyArr.length-<span class="number">1</span>]] = e.target.value;</span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="comment">//不是文本节点,可能是一个DOM元素，需要进行递归处理</span></span><br><span class="line">        node.childNodes.forEach(<span class="function">(<span class="params">child</span>)=&gt;</span>&#123;modelReplace(child)&#125;);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//把文档碎片的内容放到文档上</span></span><br><span class="line">    vm.$el.appendChild(fragment);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//发布者类(收集Watcher订阅者类)</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dep</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="comment">//所有的watcher都被存到这个数组中</span></span><br><span class="line">        <span class="built_in">this</span>.subs = [];</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//往数组里面追加watcher</span></span><br><span class="line">    <span class="function"><span class="title">addSub</span>(<span class="params">watcher</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.subs.push(watcher);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//通知</span></span><br><span class="line">    <span class="function"><span class="title">notify</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.subs.forEach(<span class="function">(<span class="params">watcher</span>)=&gt;</span>&#123;watcher.update()&#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Watcher</span> </span>&#123;</span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param </span>vm    vm中保存着最新的数据</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param </span>key   在vm上众多的数据中，根据key来确定更新哪一个值，在new watcher期间，指定watcher对应的数据的名字</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param </span>cb    如何去更新自己</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">vm,key,cb</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.vm = vm;</span><br><span class="line">        <span class="built_in">this</span>.key = key;</span><br><span class="line">        <span class="built_in">this</span>.cb = cb;</span><br><span class="line">        <span class="comment">//在构造函数里面把watcher存到数组里面</span></span><br><span class="line">        <span class="comment">//下面三行代码吧创建的额watcher实例存到Dep实例的subs数组中</span></span><br><span class="line">        Dep.target = <span class="built_in">this</span>;      <span class="comment">//this就是watcher实例</span></span><br><span class="line">        <span class="comment">//这一行代码主要是让他去出发getter方法</span></span><br><span class="line">        key.split(<span class="string">&#x27;.&#x27;</span>).reduce(<span class="function">(<span class="params">newObj,k</span>)=&gt;</span>newObj[k],vm);    <span class="comment">//每一次创建实例，会在这里取一次值给vm，会触发getter</span></span><br><span class="line">        Dep.target = <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//能让发布者通知我</span></span><br><span class="line">    <span class="function"><span class="title">update</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="comment">//把新的值传给回调函数,新的值来自于this.key</span></span><br><span class="line">        <span class="keyword">const</span> value = <span class="built_in">this</span>.key.split(<span class="string">&#x27;.&#x27;</span>).reduce(<span class="function">(<span class="params">newObj,key</span>)=&gt;</span>&#123;<span class="keyword">return</span> newObj[key]&#125;,<span class="built_in">this</span>.vm)</span><br><span class="line">        <span class="built_in">this</span>.cb(value);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><strong>写了三天，不容易啊！！！！！</strong></p>
</li>
</ul>

      
    </div>
    
    
    

    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div>坚持原创技术分享，您的支持将鼓励我继续创作！</div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="http://chaoyxy.cn/data/User/admin/home/desktop/images/alipay.jpg" alt=" 微信支付"/>
        <p>微信支付</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="http://chaoyxy.cn/data/User/admin/home/desktop/images/wechatpay.jpg" alt=" 支付宝"/>
        <p>支付宝</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/blogs/tags/Vue/" rel="tag"># Vue</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/blogs/2022/03/17/%E6%89%8B%E6%92%95vue%E4%B9%8B%E5%AF%B9%E4%BA%8B%E4%BB%B6%E6%8C%82%E8%BD%BD%E5%92%8C%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%AF%A6%E8%A7%A3/" rel="next" title="手撕vue之对事件挂载原理详解">
                <i class="fa fa-chevron-left"></i> 手撕vue之对事件挂载原理详解
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/blogs/2022/03/29/Android%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8E%A7%E4%BB%B6%E4%B9%8B%E7%8E%AF%E5%BD%A2%E8%BF%9B%E5%BA%A6%E6%9D%A1/" rel="prev" title="Android自定义控件之环形进度条">
                Android自定义控件之环形进度条 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
      <div id="disqus_thread">
        <noscript>
          Please enable JavaScript to view the
          <a target="_blank" rel="noopener" href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
        </noscript>
      </div>
    </div>

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image"
                src="/blogs/images/cat.jpg"
                alt="" />
            
              <p class="site-author-name" itemprop="name"></p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/blogs/archives">
              
                  <span class="site-state-item-count">43</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/blogs/tags/index.html">
                  <span class="site-state-item-count">10</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://gitee.com/louchaoyy" target="_blank" title="Gitee">
                      
                        <i class="fa fa-fw fa-gitee"></i>Gitee</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="louchao@louchaoyy.cn" target="_blank" title="E-Mail">
                      
                        <i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A-%E5%89%8D%E7%BD%AE%E6%8A%80%E6%9C%AF%E7%82%B9"><span class="nav-number">1.</span> <span class="nav-text">1.双向数据绑定-前置技术点</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%95%B0%E7%BB%84%E7%9A%84reduce-%E6%96%B9%E6%B3%95"><span class="nav-number">1.1.</span> <span class="nav-text">1.数组的reduce()方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E5%8F%91%E5%B8%83-%E8%AE%A2%E9%98%85%E8%80%85%E6%A8%A1%E5%BC%8F"><span class="nav-number">1.2.</span> <span class="nav-text">2.发布-订阅者模式</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-%E4%BB%80%E4%B9%88%E6%98%AF%E5%8F%91%E5%B8%83-%E8%AE%A2%E9%98%85%E8%80%85%E6%A8%A1%E5%BC%8F%EF%BC%9F"><span class="nav-number">1.2.1.</span> <span class="nav-text">1.什么是发布-订阅者模式？</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-%E5%AE%9E%E7%8E%B0%E4%BB%A5%E4%B8%8B%E5%8F%91%E5%B8%83-%E8%AE%A2%E9%98%85%E8%80%85%E6%A8%A1%E5%BC%8F"><span class="nav-number">1.2.2.</span> <span class="nav-text">2.实现以下发布-订阅者模式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-%E5%AE%8C%E6%95%B4%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E5%8F%91%E5%B8%83%E8%AE%A2%E9%98%85%E8%80%85%E6%A8%A1%E5%BC%8F"><span class="nav-number">1.2.3.</span> <span class="nav-text">3.完整实现一个最简单的发布订阅者模式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-%E5%8F%91%E5%B8%83-%E8%AE%A2%E9%98%85%E8%80%85%E7%9A%84%E4%BD%9C%E7%94%A8"><span class="nav-number">1.2.4.</span> <span class="nav-text">4.发布-订阅者的作用</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E6%95%B0%E6%8D%AE%E5%8A%AB%E6%8C%81"><span class="nav-number">1.3.</span> <span class="nav-text">3.数据劫持</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-%E7%AE%80%E5%8D%95%E5%AE%9E%E7%94%A8%E6%95%B0%E6%8D%AE%E5%8A%AB%E6%8C%81%E7%BB%99%E4%B8%80%E5%B1%82%E5%AF%B9%E8%B1%A1%E6%B7%BB%E5%8A%A0getter-setter%E6%96%B9%E6%B3%95"><span class="nav-number">1.3.1.</span> <span class="nav-text">1.简单实用数据劫持给一层对象添加getter,setter方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-%E4%BD%BF%E7%94%A8%E9%80%92%E5%BD%92%E7%BB%99%E5%A4%9A%E5%B1%82%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7%E9%83%BD%E6%B7%BB%E5%8A%A0getter-setter%E6%96%B9%E6%B3%95"><span class="nav-number">1.3.2.</span> <span class="nav-text">2.使用递归给多层对象属性都添加getter,setter方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-%E5%B1%9E%E6%80%A7%E4%BB%A3%E7%90%86"><span class="nav-number">1.3.3.</span> <span class="nav-text">3.属性代理</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E6%96%87%E6%A1%A3%E7%A2%8E%E7%89%87"><span class="nav-number">2.</span> <span class="nav-text">2.文档碎片</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E6%A8%A1%E6%9D%BF%E7%BC%96%E8%AF%91"><span class="nav-number">3.</span> <span class="nav-text">3.模板编译</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-%E5%8F%91%E5%B8%83-%E8%AE%A2%E9%98%85%E8%80%85%E6%A8%A1%E5%BC%8F%E7%9A%84%E8%BF%90%E7%94%A8"><span class="nav-number">4.</span> <span class="nav-text">4.发布-订阅者模式的运用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-%E5%8D%95%E5%90%91%E7%BB%91%E5%AE%9A"><span class="nav-number">5.</span> <span class="nav-text">5.单向绑定</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A"><span class="nav-number">6.</span> <span class="nav-text">6.双向绑定</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      
        <div class="back-to-top">
          <i class="fa fa-arrow-up"></i>
          
        </div>
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Chaoyxy</span>

  
</div>

<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<!--

  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Gemini</a> v5.1.3</div>
-->




        







        
      </div>
    </footer>

    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  
    <script type="text/javascript" src="/blogs/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  

  
  
    <script type="text/javascript" src="/blogs/lib/canvas-nest/canvas-nest.min.js"></script>
  


  


  <script type="text/javascript" src="/blogs/js/src/utils.js?v=5.1.3"></script>

  <script type="text/javascript" src="/blogs/js/src/motion.js?v=5.1.3"></script>



  
  


  <script type="text/javascript" src="/blogs/js/src/affix.js?v=5.1.3"></script>

  <script type="text/javascript" src="/blogs/js/src/schemes/pisces.js?v=5.1.3"></script>



  
  <script type="text/javascript" src="/blogs/js/src/scrollspy.js?v=5.1.3"></script>
<script type="text/javascript" src="/blogs/js/src/post-details.js?v=5.1.3"></script>



  


  <script type="text/javascript" src="/blogs/js/src/bootstrap.js?v=5.1.3"></script>



  


  

    
      <script id="dsq-count-scr" src="https://Chaoyxy.disqus.com/count.js" async></script>
    

    
      <script type="text/javascript">
        var disqus_config = function () {
          this.page.url = 'https://louchaoyy.gitee.io/blogs/2022/03/18/vue%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/';
          this.page.identifier = '2022/03/18/vue双向数据绑定原理解析/';
          this.page.title = 'vue双向数据绑定原理解析(源代码在文章末尾)';
        };
        var d = document, s = d.createElement('script');
        s.src = 'https://Chaoyxy.disqus.com/embed.js';
        s.setAttribute('data-timestamp', '' + +new Date());
        (d.head || d.body).appendChild(s);
      </script>
    

  




	





  














  





  

  

  

  
  

  

  

  

</body>
</html>
